<template>
  <div class="friends-view">
    <!-- 搜索框 -->
    <div class="search-section">
      <div class="search-box">
        <input
          v-model="searchQuery"
          placeholder="查找听友（输入对方用户名）"
          class="search-input"
          @keyup.enter="searchFriend"
        />
        <button @click="searchFriend" class="search-button">
          <i class="iconfont icon-search"></i>
        </button>
      </div>
    </div>

    <!-- 功能卡片 -->
    <div class="cards-grid">
      <!-- 听友列表 -->
      <div @click="goTo('friendList')" class="feature-card">
        <h2 class="card-title">听友列表</h2>
        <p class="card-description">浏览你的全部听友</p>
      </div>

      <!-- 大家都在听 -->
      <div @click="goTo('popular')" class="feature-card">
        <h2 class="card-title">大家都在听</h2>
        <p class="card-description">看看热门歌曲榜</p>
      </div>

      <!-- 进入听友音乐库 -->
      <div @click="goTo('friendLibrary')" class="feature-card">
        <h2 class="card-title">听友音乐库</h2>
        <p class="card-description">访问听友的音乐收藏</p>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'FriendsView',
  setup() {
    const searchQuery = ref('')

    const searchFriend = () => {
      if (searchQuery.value.trim() === '') {
        alert('请输入听友用户名')
      } else {
        alert(`搜索：${searchQuery.value}（功能开发中）`)
      }
    }

    const goTo = (section) => {
      alert(`进入 ${section} 页面（功能开发中）`)
    }

    return {
      searchQuery,
      searchFriend,
      goTo,
    }
  },
}
</script>

<style scoped>
.friends-view {
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.search-section {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.search-box {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.search-input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  border: 1px solid var(--border-color);
  border-radius: 2rem;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.search-button {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-color-secondary);
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s ease;
}

.search-button:hover {
  color: var(--primary-color);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card {
  background-color: var(--surface-light);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.card-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.card-description {
  color: var(--text-color-secondary);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .friends-view {
    padding: 1rem;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }
}
</style>
